function head_fontsize(size) {
    let span = document.getElementsByTagName('span')
    console.log(span);
    for (let i = 2; i < span.length; i++) {
        span[i].style.fontSize = size + 'px';
    }
}

window.onload = function () {
    //打印窗体高度
    var body = document.body;
    console.log(body.offsetWidth);

    let buttom = document.getElementsByClassName('head_box')
    console.log(buttom);

    // console.log(buttom.length);
    // let len = buttom.length
    //     for(let i=0; i < len; i++){
    //         if(i.onclick){
    //             i.onclick = function (){
    //                 body.style = "background:#000"
    //             }
    //         }
    //     }
    let buttom_1 = document.getElementsByClassName('head_box')[0]
    buttom_1.onclick = function () {
        body.style = "background:#71c7ec"
    }
    let buttom_2 = document.getElementsByClassName('head_box')[1]
    buttom_2.onclick = function () {
        body.style = "background:#b9d2ff"
    }
    let buttom_3 = document.getElementsByClassName('head_box')[2]
    buttom_3.onclick = function () {
        body.style = "background:#81e038"
    }
    let buttom_4 = document.getElementsByClassName('head_box')[3]
    buttom_4.onclick = function () {
        body.style = "background:#978260"
    }
    let buttom_5 = document.getElementsByClassName('head_box')[4]
    buttom_5.onclick = function () {
        body.style = "background:#78539a"
    }
    let buttom_6 = document.getElementsByClassName('head_box')[5]
    buttom_6.onclick = function () {
        body.style = "background:#ff723f"
    }
    let buttom_7 = document.getElementsByClassName('head_box')[6]
    buttom_7.onclick = function () {
        body.style = "background:#7bb39c"
    }
    let buttom_8 = document.getElementsByClassName('head_box')[7]
    buttom_8.onclick = function () {
        body.style = "background:#c7c7c7"
    }

    let font = document.querySelectorAll('a')
    console.log(font);

    let font_1 = document.querySelectorAll('a')[0]
    // let span = document.querySelector('.title_center')

    let len = document.getElementsByTagName('span').length
    console.log(font_1);
    console.log(len);
    /* 
    使用：href="javascript:;"、"void(0);"
    font_1.onclick = function(){

        for(let i=len -2; i > 0; i--){
            span[i].style.fontSize = Number(20) + 'px';
        }
        // span.style = "font-size:24px"
        body.span.style.fontSize = Number(24) + 'px';
        console.log(11111);
    }

    function head_fontsize(size){
        let span = document.getElementsByTagName('span')
        for(let i=0 ; i < span.length; i++){
            span[i].style.fontSize = size + 'px';
        }
    }*/

}
//單繼出發事件
let body = document.querySelector('body')
body.onclick = function () {

    let div1 = document.querySelector(".hidden_box")
    let div2 = document.querySelector(".hidden_button")

    console.log(body);
    console.log(div2);

    body.addEventListener('click', function (e) {
        if (div1.classList.contains('head') && div2.classList.contains('AAA')) {
            fadeIn(div1,div2);
        } else {
            fadeOut(div1,div2);
        }
    });

    console.log(div2.classList);

    function fadeIn(div2, display) {
        if ((div1.classList.contains('head') && div2.classList.contains('AAA'))) {
            div1.classList.remove('head');
            div2.classList.remove('AAA');
        }
        div1.style.opacity = 0;
        div1.style.display = display || "block";
        div1.style.hight = 300 + "px";
        div1.style.width = 300 + "px"
        div1.style.background = "cadetblue";

        div2.style.opacity = 0;
        div2.style.display = display || "block";
        div2.style.hight = 300 + "px";
        div2.style.width = 300 + "px"
        div2.style.background = "cadetblue";

        (function fade() {
            var val = parseFloat(div2.style.opacity);
            var val_2 = parseFloat(div1.style.opacity);
            if (!((val += .1) > 1)) {
                div2.style.opacity = val;
                requestAnimationFrame(fade);
            }
            if (!((val += .1) > 1)) {
                div1.style.opacity = val_2;
                requestAnimationFrame(fade);
            }
        })();
    }

    function fadeOut(div1,div2) {
        div1.style.opacity = 1;
        div2.style.opacity = 1;

        (function fade() {
            if ((div1.style.opacity -= .1) < 0) {
                div1.style.display = 'none';
                div1.classList.add('head');
            } else {
                requestAnimationFrame(fade);
            }

            if ((div2.style.opacity -= .1) < 0) {
                div2.style.display = 'none';
                div2.classList.add('AAA');
            } else {
                requestAnimationFrame(fade);
            }
        })();
    }

    body.onclick = function () {

        fadeIn(div1,div2, 0, 6000)
        fadeOut(div1,div2, 0, 6000)
        console.log(11111);
        // alert("AAA")
    }
}